import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Dialog from '@kuiper-components/dialog';
import Button from '@kuiper-components/button';
import { Link } from 'react-router-dom';
import { calculateJobScore } from '../../../../../common/calculateScore';
import { Wall1, Wall2, Wall3, Soldier1, Soldier2, Soldier3 } from './picture';
import s from './SecurityRating.module.css';

const securityLevel = job => {
	const totalRate = calculateJobScore(job);
	let res = {
		rate: totalRate,
	};

	if (totalRate > 95) {
		res = {
			...res,
			Wall: Wall1,
			Soldier: Soldier1,
			level: '固若金汤',
			desc: '您的资产整体风险较低，请持续关注。',
			color: '#0AB272',
		};
	} else if (totalRate <= 95 && totalRate >= 80) {
		res = {
			...res,
			Wall: Wall2,
			Soldier: Soldier2,
			level: '有待加固',
			desc: '您的资产整体风险较高，建议您加固防护体系。',
			color: '#FAAF2C',
		};
	} else {
		res = {
			...res,
			Wall: Wall3,
			Soldier: Soldier3,
			level: '一触即溃',
			desc: '您的资产整体风险严重，建议您尽快加固防护体系。',
			color: '#F04038',
		};
	}
	return res;
};

export default function SecurityRating({ className, job, showTips='1' }) {
	const { rate, Soldier, Wall, level, desc, color } = securityLevel(job);
	const [dialogVisible, setDialogVisible] = React.useState(false);
	const handleClose = () => {
		setDialogVisible(false);
	};

	return (
		<div className={cn(className, s.securityRating)}>
			<div className={s.header}>
				<div className={s.label}>
					<span className={s.levelText}>风险等级</span>
					<span className={s.rule} onClick={() => setDialogVisible(true)}>
						查看评分细则
					</span>
				</div>
				<div className={s.rateWapper} style={{ backgroundColor: color }}>
					{rate}
				</div>
			</div>
			<div className={s.descWapper}>
				<Soldier className={s.soldier} />
				<div className={s.text}>
					<div className={s.level}>{level}</div>
					<div className={s.desc}>{desc}</div>
				</div>
			</div>
			<Wall className={s.wall} />
			<Dialog
				visible={dialogVisible}
				destroyOnClose={true}
				title="评分细则"
				onClose={handleClose}
				maskStyle={{ zIndex: 100 }}
			>
				<div className={s.table}>
					<div>
						<div className={s.smalltit}>评分明细：</div>
						<div>
							<div className={s.head}>
								<span>风险值范围</span>
								<span>风险等级</span>
								<span>分值说明</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`75<风险值<=100`}</span>
								<span>严重</span>
								<span>您的资产整体风险严重，建议您尽快加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`50<风险值<=75`}</span>
								<span>高危</span>
								<span>您的资产整体风险高，建议您加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`25<风险值<=50`}</span>
								<span>中危</span>
								<span>您的资产整体风险较高，建议您加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`0<风险值<=25`}</span>
								<span>低危</span>
								<span>您的资产整体风险较低，请持续关注。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>0</span>
								<span>安全</span>
								<span>您的资产安全状态良好，请持续关注。</span>
							</div>
						</div>
					</div>
					<div>
						<div className={s.loseDetail}>评分规则：</div>
						<div className={s.fs12}>
							<div>1. 所有的风险结果均为一个结果记1分。</div>
							<div>2. 风险值根据风险结果中风险等级最高的来计算基础分值，即若存在高危风险结果，则风险值将从高危所对应的最低分值开始计算。</div>
							<div>3. 一旦根据最高等级的风险结果计算基础分值后，将不再重复计算该等级以下的情况。</div>
							<div>4. 风险值累加只能加到对应等级的最高分值，即若只有中危，则风险值最多能到中危。</div>
						</div>
					</div>
					{showTips && <div className={s.info}>
						说明：评分对象为Web安全监测和主机安全监测两部分，可用性监测和IPv6合规监测因不涉及网络资产安全，故不参与分数评定。
					</div>}
					<div className={s.closeBtn}>
						<Button primary onClick={handleClose}>
							关闭
						</Button>
					</div>
				</div>
			</Dialog>
		</div>
	);
}

SecurityRating.propTypes = {
	className: PropTypes.string,
	job: PropTypes.shape({
		vulResult: PropTypes.object,
		sslResult: PropTypes.object,
		securityEventResult: PropTypes.object,
	}),
};

SecurityRating.defaultProps = {
	className: s.securityRating,
};
